// import styled from "styled-components"
import styled from "styled-px2rem/lib/index"

export const Page=styled.div`
    height: ${props=>props.Display?'100vh':0};
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    background: ${props=>props.Display?'rgba(0,0,0,0.1)':'transparent'};
    bottom: 0;
    left: 0;
    z-index: 5;
    overflow: hidden;
    transition:height 500ms;
    & .side{
        flex: 1;
    }
    & .container{
        background: #fff;
        max-height: 70vh;
        overflow-y: scroll;
        padding: 10px;
        padding-bottom: 60px;
        position: relative;
        & .cancel{
            position: absolute;
            right: 10px;
            top: 10px;
        }
        & .header{
            display: flex;
            align-items: flex-end;
            & img{
                width: 70px;
                height: 70px;
            }
            & .price{
                color: red;
            }
        }
        & .body{
            & .attribute{
                font-size: 18px;
                padding: 5px;
                & .attribute_list{
                    display: flex;
                    flex-wrap: wrap;
                    & div{
                        margin: 8px;
                        & input{
                            display: none;
                        }
                        & label{
                            border: 1px solid #000;
                            padding: 5px;
                            font-size: 14px;
                            
                        }
                        & input:checked+label{
                                color: white;
                                background-color: red;
                            }
                    }
                }
            }
            & .count{
                & button{
                    margin-top: 8px;
                    padding: 0 15px;
                    font-size: 18px;
                    border: 1px solid #000;
                    background: #fff;
                    border-radius: 3px;
                    vertical-align: middle;
                }
                & .disable{
                    border-color: #999;
                    color: #999;
                }
                & input{
                    margin-top: 8px;
                    width: 50px;
                    border: 1px solid #000;
                    line-height: 20px;
                    vertical-align: middle;
                    text-align: center;
                }
            }
        }
    }
    
`